@media screen and (min-width: 1200px) {
  .left {
    width: 804px;
    margin-left: 16px;
  }
  .left > div:first-child {
    height: 420px;
    margin: 16px 0;
  }
  .right {
    width: 320px;
    margin: 16px;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .left {
    width: 635px;
  }
  .left > div:first-child {
    height: 420px;
    margin: 16px 0;
  }
  .right {
    width: 320px;
    margin: 16px;
  }
}

@media screen and (min-width: 779px) and (max-width: 991px) {
  .left {
    width: 432px;
  }
  .left > div:first-child {
    height: 420px;
    margin: 16px 0;
  }
  .right {
    width: 320px;
  }
}

@media screen and (min-width: 658px) and (max-width: 778px) {
  .left {
    width: 100%;
    padding: 0 15px;
  }
  .left > div:first-child {
    height: 170.2px;
    margin: 16px 0;
  }
  .right {
    display: none;
  }
}

@media screen and (max-width: 657px) {
  .left {
    width: 100%;
    padding: 0 15px;
  }
  .left > div:first-child {
    height: 170.2px;
    margin: 16px 0;
  }
  .right {
    display: none;
  }
}
